import React, { forwardRef , useState} from 'react'
import { Form,Input,Upload, message, Button,Image  } from 'antd'
import { UploadOutlined } from '@ant-design/icons';

const {TextArea} = Input

const AddUser=forwardRef((props,ref)=> {
    const [img, setImg] = useState('')
    const props1 = {
        name: 'file',
        action: '/api/question/upload_img',
        headers: {
          authorization: 'authorization-text',
        },
        onChange(info) {
          if (info.file.status !== 'uploading') {
            console.log(info.file, info.fileList);
            setImg(info.file.response.result.topic_img)
            console.log(img)
          }
          if (info.file.status === 'done') {
            message.success(`${info.file.name} file uploaded successfully`);
          } else if (info.file.status === 'error') {
            message.error(`${info.file.name} file upload failed.`);
          }
        },
    };
    return (
        <div>
            <div style={{height:'150px',borderBottom:'20px'}}>
                请上传用户头像：
                <Upload {...props1}>
                        <Button icon={<UploadOutlined />}>Click to Upload</Button>
                </Upload>
                <p>{img}</p>
                <Image style={{width:'50px',height:'50px'}} src={img} />
            </div>
            <Form
                ref={ref}
                // layout="vertical"
            >
                <Form.Item
                    label="用户名"
                    name="user_name"
                    rules={[{ required: true, message: '请输入用户名' }]}
                >
                    <Input />
                </Form.Item>
                
                <Form.Item
                    label="用户密码"
                    name="password"
                    rules={[{ required: true, message: '请输入密码' }]}
                >
                    <Input />
                </Form.Item>
                
                <Form.Item
                    label="电话号码"
                    name="phone_number"
                    rules={[{ required: true, message: '请输入电话号码' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="用户头像"
                    name="user_avatar"
                    rules={[{ required: true, message: '请上传用户头像' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="性别"
                    name="user_gendar"
                    rules={[{ required: true, message: '请输入用户性别' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="个性签名"
                    name="user_signature"
                    rules={[{ required: true, message: '请输入个性签名' }]}
                >
                    <Input />
                </Form.Item>
          </Form>
        </div>
    )
})
export default AddUser